<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Album Demo</title>
<style type="text/css">
BODY {
	FONT-SIZE: 14px;
	BACKGROUND: #eee;
	LINE-HEIGHT: 1.6;
	FONT-FAMILY: "Trebuchet MS", Verdana, Arial, sans-serif; //
	cursor: url(images/album/next.cur), default;
}

.bodyDiv {
	BORDER-RIGHT: #ccc 1px solid;
	PADDING-RIGHT: 20px;
	BORDER-TOP: #ccc 1px solid;
	PADDING-LEFT: 20px;
	BACKGROUND: #fff;
	PADDING-BOTTOM: 20px;
	MARGIN: 20px auto;
	BORDER-LEFT: #ccc 1px solid;
	WIDTH: 720px;
	PADDING-TOP: 20px;
	BORDER-BOTTOM: #ccc 1px solid;
}

H1 {
	MARGIN: 0px
}

A {
	outline-color: #888
}

.gallery {
	width: 640px;
	padding: 10px;
	background: #ffffff;
	border: 1px solid #e1e1e1;
	margin: 0 auto;
}

.displayingPhoto {
	width: 640px;
	min-height: 360px;
	height:auto;
	TEXT-ALIGN: center;
}

.displayingPhotoDesc{
	TEXT-ALIGN: left;
	width: 600px;
	min-height: 32px;
	height:auto;
	PADDING-LEFT: 20px;
}

.galleryNav {
	width: 640px;
	height: 110px;
	overflow: auto;
	margin: 0 auto;
	background: #c1c1c1;
}

.galleryNavImgs {
	height: 90px;
	overflow: hidden;
}

.galleryNavImgs img {
	height: 80px;
	margin: 5px;
	border: 1px solid #1f1f1f;
	float: left;
	display: inline;
}
</style>
<script type="text/javascript" src="/skyline/js/jquery.js"></script>
<script type="text/javascript" src="/skyline/js/photo.js"></script>
<script>
</script>
</head>
<body onload="Gallery.initial(setting);">
<div class="bodyDiv">
<h1>Album Demo</h1>
<hr>
<div id="gallery1" class="gallery"><font id="curPhotoIndex1" class="curPhotoIndex"></font>/<font
	id="totalPhotoNum1" class="totalPhotoNum"></font>
<div id="displayingPhoto1" class="displayingPhoto">
<div id="displayingPhotoImg1" class="displayingPhotoImg"></div>
<div id="displayingPhotoDesc1"  class="displayingPhotoDesc"></div>
</div>
<div id="galleryNav1" class="galleryNav">
<div id="galleryNavImgs1" class="galleryNavImgs">
<%
	/**输出照片列表
	*id为img{i},name为照片的真实id;
	*如：序号为100,id为200,缩略图地址为"/skyline/image/albumdemo/iphone_1.jpg"的照片
	*输出<a href='javascript:gallery.getDisplayingPhoto(100)'><img id='img100' name='200' class='thumbs' src='/skyline/image/albumdemo/iphone_1.jpg'  /></a>
	*/
	for (int i = 0; i < 50; i++) {
		out.println("<a href='javascript:Gallery.getDisplayingPhoto(" + i + ")'><img id='img1" + i+ "' name='photoid" + i+ "' class='thumbs' src='/skyline/image/albumdemo/iphone_" + (i % 4 + 1) + ".jpg'  /></a>");
	}
%>
</div>
</div>
</div>
</div>
<div class="bodyDiv">
<h1>Album Demo</h1>
<hr>
<div id="gallery" class="gallery"><font id="curPhotoIndex" class="curPhotoIndex"></font>/<font
	id="totalPhotoNum" class="totalPhotoNum"></font>
<div id="displayingPhoto" class="displayingPhoto">
<div id="displayingPhotoImg" class="displayingPhotoImg"></div>
<div id="displayingPhotoDesc"  class="displayingPhotoDesc"></div>
</div>
<div id="galleryNav" class="galleryNav">
<div id="galleryNavImgs" class="galleryNavImgs">

</div>
</div>
</div>
</div>
<script type="text/javascript">
	photos = [];
	<%
	for (int i = 0; i < 50; i++) {
		out.print("photos.push({file:'/skyline/image/albumdemo/iphone_" + (i % 4 + 1) + "b.jpg',id:'photoid"+(i+1)+"'});\n");
	}
	%>
	setting = {
		curPid:'photoid23',
		photos:photos,
		navId:'galleryNav1',
		navImgId:'galleryNavImgs1',
		dispImgId:'displayingPhotoImg1',
		navImgPre:'img1',
		ttlPnumId:'totalPhotoNum1',
		curPidxId:'curPhotoIndex1',
		afterLoad:function(photo) {
			var desc = "Photo "+photo.id +"'s Description";
			$('#displayingPhotoDesc1').html(desc);
		}
	}
</script>
</body>
</html>